<template>
    <div>
        <div class="flex text-sm gap-x-6">
            <Map class="w-2/5" :option="{location: baseInfo.lngLat && baseInfo.lngLat !== '-' && baseInfo.lngLat.split(',') }" @load="handleLoadMap" />
            <section
                class="grid w-3/5 grid-cols-2 gap-6"
            >
                <div>
                    <span class="font-medium text-gray-dark">上报人员：</span>
                    <span class="text-gray-light">{{ baseInfo&&baseInfo.reportUserName }}</span>
                </div>
                <div>
                    <span class="font-medium text-gray-dark">上报部门：</span>
                    <span class="text-gray-light">{{ baseInfo&&baseInfo.reportDepName }}</span>
                </div>
                <div>
                    <span class="font-medium text-gray-dark">事件类型：</span>
                    <span class="text-gray-light">{{ baseInfo&&EventTypes[baseInfo.type] }}</span>
                </div>
                <div>
                    <span class="font-medium text-gray-dark">事件等级：</span>
                    <span class="text-gray-light">{{ baseInfo&&EventLevel[baseInfo.level] }}</span>
                </div>
                <div>
                    <span class="font-medium text-gray-dark">所属公路：</span>
                    <span class="text-gray-light">{{ baseInfo&&baseInfo.roadName }}&nbsp;-&nbsp;{{ baseInfo&&Directions[baseInfo.direction] }}</span>
                </div>
                <div>
                    <span class="font-medium text-gray-dark">事发地点：</span>
                    <span class="text-gray-light">{{ baseInfo&&baseInfo.location }}</span>
                </div>
                <div class="flex">
                    <span class="font-medium text-gray-dark">事发原因：</span>
                    <span class="flex-1 break-all text-gray-light">{{ baseInfo&&baseInfo.reason }}</span>
                </div>
                <div />
                <div>
                    <span class="font-medium text-gray-dark">是否起火：</span>
                    <span class="text-gray-light">{{ baseInfo&&IsFire[baseInfo.fire] }}</span>
                </div>
                <div class="flex">
                    <span v-if="baseInfo&&baseInfo.fire" class="font-medium text-gray-dark">情况描述：</span>
                    <span v-if="baseInfo&&baseInfo.fire" class="flex-1 break-all text-gray-light">{{ baseInfo&&baseInfo.fireDesc || '-' }}</span>
                </div>
                <div>
                    <span class="font-medium text-gray-dark">是否爆炸：</span>
                    <span class="text-gray-light">{{ baseInfo&&IsExplode[baseInfo.explosion] }}</span>
                </div>
                <div class="flex">
                    <span v-if="baseInfo&&baseInfo.explosion" class="font-medium text-gray-dark">情况描述：</span>
                    <span v-if="baseInfo&&baseInfo.explosion" class="flex-1 break-all text-gray-light">{{ baseInfo&&baseInfo.explosionDesc || '-' }}</span>
                </div>
                <div>
                    <span class="font-medium text-gray-dark">是否有污染物：</span>
                    <span class="text-gray-light">{{ baseInfo&&IsContaminantDAO[baseInfo.pollutant] }}</span>
                </div>
                <div class="flex">
                    <span v-if="baseInfo&&baseInfo.pollutant" class="font-medium text-gray-dark">情况描述：</span>
                    <span v-if="baseInfo&&baseInfo.pollutant" class="flex-1 break-all text-gray-light">{{ baseInfo&&baseInfo.pollutantDesc || '-' }}</span>
                </div>
                <div>
                    <span class="font-medium text-gray-dark">是否有散落物：</span>
                    <span class="text-gray-light">{{ baseInfo&&IsScattered[baseInfo.fallOut] }}</span>
                </div>
                <div class="flex">
                    <span v-if="baseInfo&&baseInfo.fallOut" class="font-medium text-gray-dark">情况描述：</span>
                    <span v-if="baseInfo&&baseInfo.fallOut" class="flex-1 break-all text-gray-light">{{ baseInfo&&baseInfo.fallOutDesc || '-' }}</span>
                </div>
                <div class="col-span-2">
                    <div v-if="baseInfo.photos!=='-'">
                        <el-image
                            v-for="p in baseInfo.photos&&baseInfo.photos.split(',')"
                            :key="p"
                            lazy
                            class="w-32 h-32 mr-6"
                            :src="p"
                            fit="cover"
                            :preview-src-list="baseInfo.photos.split(',')"
                            :z-index="99999"
                        />
                    </div>
                    <span v-else>-</span>
                </div>
            </section>
        </div>
        <section v-if="baseInfo&&baseInfo.roadCompensation" class="mt-6">
             <TitleTips title="路产赔偿项目" />
             <div class="grid grid-cols-5 gap-6 mb-6">
                <div>
                    <span class="font-medium text-gray-dark">项目名称：</span>
                    <span class="text-gray-light">{{ baseInfo&&baseInfo.compensationContent&&baseInfo.compensationContent.projectName }}</span>
                </div>
                <div>
                    <span class="font-medium text-gray-dark">单位：</span>
                    <span class="text-gray-light">{{ baseInfo&&baseInfo.compensationContent&&baseInfo.compensationContent.unit }}</span>
                </div>
                <div>
                    <span class="font-medium text-gray-dark">单价：</span>
                    <span class="text-gray-light">{{ baseInfo&&baseInfo.compensationContent&&baseInfo.compensationContent.unitPrice }}</span>
                </div>
                <div>
                    <span class="font-medium text-gray-dark">数量：</span>
                    <span class="text-gray-light">{{ baseInfo&&baseInfo.compensationContent&&baseInfo.compensationContent.count }}</span>
                </div>
                <div>
                    <span class="font-medium text-gray-dark">预计赔付金额：</span>
                    <span class="text-gray-light">{{ baseInfo&&baseInfo.compensationContent&&baseInfo.compensationContent.prepareAmount }}</span>
                </div>
             </div>
             <div class="flex">
                <span class="font-medium text-gray-dark">备注：</span>
                <span class="flex-1 break-all text-gray-light">{{ baseInfo&&baseInfo.compensationContent&&baseInfo.compensationContent.remark }}</span>
             </div>
        </section>
    </div>
</template>
<script>
import { mapState } from 'vuex'
import { EventTypes, EventLevel, IsFire, IsExplode, IsContaminantDAO, IsScattered } from '@/views/maintenance-decision/constants'
import { Directions } from '@/config/constants'
import Map from './Map'
export default {
    components: {
        Map
    },
    data() {
        return {
            Directions,
            EventTypes,
            EventLevel,
            IsFire,
            IsExplode,
            IsContaminantDAO,
            IsScattered,
            map: {}
        }
    },
    computed: {
        ...mapState('trafficIncident', ['baseInfo']),
    },
    methods: {
        handleLoadMap(map) {
            this.map = map
        },
    },
}
</script>
